<template>
	<u-popup v-model="popupVisible" :style="{ '--color': vuex_config.themeColor1 }" border-radius="16"
		safe-area-inset-bottom mode="bottom" height="60%" closeable @close="$closePopup()">
		<scroll-view scroll-y class="sww-coupon-box" @scrolltolower="$loadMore">
			<u-radio-group v-model="pickIndex" :active-color="vuex_config.themeColor1">
				<view class="data-item" @click="$onClick(item, index)" v-for="(item, index) in dataList" :key="index">
					<u-radio :name="item.coupon_receive_id"></u-radio>
					<view class="audio_cont">
						<view class="di-l" :class="{ 'di-l-act': item.selfState === 1 }">
							<view class="di-price">
								<text class="u-font-30 c-ff">￥</text>
								<text class="u-font-60 c-ff fw-bold">{{ $price(item.price) }}</text>
							</view>
							<view class="di-desc u-font-24 c-ff l1 u-m-t-8">满{{ $price(item.full_reduce) }}元可用</view>
						</view>
						<view class="di-r">
							<view class="di-t u-flex u-flex-col u-row-center">
								<view class="u-font-30 fw-bold u-line-1">{{ item.name }}</view>
								<view class="remark u-font-24 u-line-1">{{ item.remark }}</view>
							</view>
							<view class="di-b u-flex u-row-between">
								<view class="u-font-24 c-99 l1">有效期至：{{ item.coupon_receive_effective }}</view>
							</view>
						</view>
						<view class="di-state" v-if="item.selfState === 2">已过期</view>
					</view>
				</view>
				<view class="data-item" @click="$onClick({ coupon_receive_id: -1 }, dataList.length)" v-if="dataList.length > 0">
					<u-radio :name="-1"></u-radio>
					<view class="audio_cont">不使用优惠券</view>
				</view>
			</u-radio-group>
			<slot></slot>
			<sww-load-more :params="dataListParams" @load="$loadMore"></sww-load-more>
		</scroll-view>

	</u-popup>
</template>
<script>
	import {
		pagingMixin
	} from '../../mixins/pagingMixin';
	import {
		toNumber
	} from '../../utils/transform';
	import {
		getMoment
	} from '../../utils/moment';

	export default {
		mixins: [pagingMixin],
		props: {
			value: {
				type: Object,
				default: () => {
					return {
						price: 0,
						name: '无可用',
						show: false // 父组件通过改变这个值来显示当前弹窗组件
					};
				}
			},
			productIds: {
				type: String,
				default: ''
			}, // 必传：需要下单的 产品id(多个,号隔开)
			prodPrice: {
				type: Number,
				default: 0
			}, // 必传
			class_id: {
				type: [Number, String],
				default: ''
			}, // 类型
			fk_supplier_id: {
				type: Number,
				default: 0
			}, // 店铺id（普通产品）
		},
		data() {
			return {
				popupVisible: false,
				dataList: [],
				pickIndex: null
			};
		},
		watch: {
			prodPrice: {
				handler(val) {
					if (val > 0) {
						this.$initPage();
					}
				},
				immediate: true
			},
			value: {
				handler(val) {
					if (val.show) {
						this.$showPopup();
					}
				},
				deep: true
			}
		},
		methods: {
			// 初始化查询已领取优惠券
			$initPage() {
				let params = {
					type: 3,
					page_size: 100,
					class_id: this.class_id
				}
				if(this.productIds){
					params.product_id = this.productIds
				}
				if (this.fk_supplier_id > 0) {
					params.supplier_id = this.fk_supplier_id
					params.class_id = params.class_id + ',' + 6
				}
				this._init_data(
					'GetCouponList', {
				 	...params
					}, {
						showLoading: false,
						callBack: this.$formatData,
						lastCallBack: this.$autoSelect
					}
				);
			},
			$loadMore() {
				this._load_data({
					callBack: this.$formatData
				});
			},
			// 数据处理（是否过期，格式化到期时间）
			$formatData(list) {
				let currentDate = getMoment();
				let dateEffective;
				list.forEach(item => {
					item.selfState = 0; // 0不可用，1，可使用，2已过期
					item.full_reduce = toNumber(item.full_reduce);
					item.price = toNumber(item.price);
					dateEffective = getMoment(item.coupon_receive_effective, 'YYYY-MM-DD hh:mm');
					if (currentDate.isBefore(dateEffective)) {
						if (this.prodPrice > 0 && this.prodPrice >= item.full_reduce) {
							item.selfState = 1;
						}
					} else {
						item.selfState = 2;
					}
					item.coupon_receive_effective = dateEffective.format('YYYY.MM.DD hh:mm');
				});
				return list;
			},
			// 自动匹配最优优惠券
			$autoSelect() {
				this.$nextTick(() => {
					let list = this.dataList.filter(item => item.selfState === 1).sort((fir, sec) => parseFloat(sec
						.price) - parseFloat(fir.price));
					if (list.length > 0) {
						this.$closePopup({
							pk_id: list[0].coupon_receive_id,
							name: list[0].name,
							price: parseFloat(list[0].price),
							show: false
						});
						this.pickIndex = list[0].coupon_receive_id
					} else {
						this.$closePopup({
							price: 0,
							name: '无可用',
							show: false
						});
					}
				});
			},
			// 选择
			$onClick(item, index) {
				if (item && item.coupon_receive_id < 0) {
					this.$closePopup({
						price: 0,
						name: '不使用优惠券',
						show: true
					});
					this.pickIndex = item.coupon_receive_id
				} else if (item.selfState === 1) {
					this.$closePopup({
						pk_id: item.coupon_receive_id,
						name: item.name,
						price: parseFloat(item.price),
						show: true
					});
					this.pickIndex = item.coupon_receive_id;
				} else if (item.selfState === 0) {
					this.$toast('此优惠券不可用');
				} else {
					this.$toast('优惠券已过期');
				}
			},
			$showPopup() {
				if (this.dataList.length > 0) {
					this.popupVisible = true;
				}
			},
			$closePopup(item = null) {
				if (!item) {
					item = this.value;
					item.show = false
				}
				this.popupVisible = item.show;
				item.len = this.dataList.length || 0;
				this.$emit('input', item);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.sww-coupon-box {
		width: 100%;
		height: 100%;
		padding: 80rpx 24rpx 24rpx;
		box-sizing: border-box;

		.data-item {
			width: 100%;
			background-color: #ffffff;
			border-radius: 8rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			position: relative;
			padding: 16rpx 0;
			border-bottom: 1px solid #f5f5f5;

			&:last-of-type {
				border-bottom: none;
			}

			.audio_cont {
				flex: 1;
				overflow: hidden;
				display: flex;
			}

			.di-state {
				width: 150rpx;
				height: 35rpx;
				font-size: 20rpx;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 16rpx;
				right: -40rpx;
				background-color: #999999;
				color: #ffffff;
				transform: rotate(45deg);
			}

			.di-l {
				width: 240rpx;
				height: 170rpx;
				background-color: #999999;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.di-l-act {
				background: linear-gradient(150deg, var(--color), $sww-theme-color-opacity);
			}

			.di-r {
				flex: 1;
				width: 100%;
				padding: 0 24rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.di-t {
					flex: 1;
					width: 100%;
					height: 100%;
				}

				.remark {
					color: #999;
				}

				.di-b {
					width: 100%;
					height: 78rpx;
					border-top: 1rpx dotted #dddddd;
				}
			}

			.audio_cont {
				padding: 16rpx 0;
			}
		}
	}
</style>
